import React, { Fragment } from 'react';
import { Empty, Statistic, Row, Col } from 'antd';
import ReactEcharts from '@/components/Echarts';
import styles from '../index.less';

const getOption = data => {
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '<span style="color:rgba(255, 255, 255, 0.55);">{a}:</span> {c}人',
            padding: [5, 9, 5, 9],
            textStyle: {
                fontSize: 12
            }
        },
        legend: {
            y: 'bottom',
            itemGap: 16,
            data: ['新增申请调岗人数', '调岗成功人数']
        },
        grid: {
            left: '5%'
        },
        xAxis: {
            show: false,
            type: 'category'
        },
        yAxis: {
            type: 'value',
            splitLine: {
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisLabel: {
                color: 'rgba(0,0,0,0.45)'
            },
            axisLine: {
                show: false,
                lineStyle: {
                    type: 'dashed'
                }
            },
            axisTick: {
                show: false
            },
            interval: 10
        },
        series: [
            {
                name: '新增申请调岗人数',
                type: 'bar',
                data: [data.applyTransferCount]
            },
            {
                name: '调岗成功人数',
                type: 'bar',
                data: [data.transferSuccessCount]
            }
        ]
    };

    return option;
};

const Tgryfx = ({ data }) => (
    <Fragment>
        <Row gutter={16}>
            <Col span={8}>
                <Statistic
                    title="新增申请调岗人数："
                    value={data.applyTransferCount ? data.applyTransferCount : '0'}
                    suffix=" 人"
                />
            </Col>
            <Col span={8}>
                <Statistic
                    title="调岗成功人数："
                    value={data.transferSuccessCount ? data.transferSuccessCount : '0'}
                    suffix=" 人"
                />
            </Col>
        </Row>
        <div className={styles.chartTitle}>调岗人员统计</div>
        {!data || data.length === 0 || (data.transferSuccessCount === 0 && data.applyTransferCount === 0) ? (
            <Empty style={{ margin: '115px 0' }} image={Empty.PRESENTED_IMAGE_SIMPLE} />
        ) : (
            <ReactEcharts style={{ height: '337px' }} option={getOption(data)} />
        )}
    </Fragment>
);

export default Tgryfx;
